<template>
  <div id="addMenu">
    <Card style="width: 100%">
      <p slot="title">菜单信息</p>
      <Form ref="formValidate" :model="menuInfo" :rules="ruleValidate" :label-width="120">
        <formItem label="上级菜单" prop="titleTop">
          <Input v-model="menuInfo.titleTop" placeholder="上级菜单" disabled></Input>
        </formItem>
        <formItem label="菜单名称" prop="title">
          <Input v-model="menuInfo.title" placeholder="权限名称"></Input>
        </formItem>
        <formItem label="路由名称" prop="name">
          <Input v-model="menuInfo.name" placeholder="路由名称"></Input>
        </formItem>
        <formItem label="是否菜单隐藏">
          <radioGroup v-model="menuInfo.type" @on-change="radioChange()">
            <Radio label="1">菜单权限</Radio>
            <Radio label="2">按钮显示</Radio>
            <Radio label="3">访问控制</Radio>
          </radioGroup>
        </formItem>
        <formItem label="是否关闭">
          <i-switch v-model="menuInfo.is_del" size="large">
            <span slot="open">显示</span>
            <span slot="close">关闭</span>
          </i-switch>
        </formItem>
        <formItem label="组件地址" prop="component">
          <Input v-model="menuInfo.component" placeholder="组件地址"></Input>
        </formItem>
        <formItem label="菜单图标" prop="component" >
          <div style="height: 150px;overflow: auto;">
          <Button v-for="(item,index) in this.iconlist[0]" :key="index" :icon="index" @click="iconClick(index)"   style="margin-left: 1px;font-size: 20px;"></Button>
          <!-- <button v-for="itme in type"><Icon :type="itme" size="24" @click="iconClick(itme)"/></span> -->
          </div>
        </formItem>
        <formItem ref="inpnt" label="菜单icon" prop="icon" v-if="menuInfo.type == 1">
          <Input  v-model="menuInfo.icon" placeholder="菜单icon">
          </Input>
          <!-- <div  :class="['Tab_Control',{'Tab':fage}]">
            <main>
              <i v-for="value in iconlist.glyphs" :key="value.icon_id" @click.stop="icon(value.font_class)" :class="['iconfont','icon-'+value.font_class]"></i>
            </main>
          </div> -->
        </formItem>
        <formItem label="菜单排序" prop="sort" v-if="menuInfo.type == 1">
          <Input v-model="menuInfo.sort" placeholder="菜单排序"></Input>
        </formItem>

        <!--            <formItem label="是否菜单隐藏">-->
        <!--                <i-switch v-model="menuInfo.hideInMenu" size="large">-->
        <!--                <i-switch v-model="menuInfo.hideInMenu" size="large">-->
        <!--                <i-switch v-model="menuInfo.hideInMenu" size="large">-->
        <!--                <i-switch v-model="menuInfo.hideInMenu" size="large">-->
        <!--                <i-switch v-model="menuInfo.hideInMenu" size="large">-->
        <!--                <i-switch v-model="menuInfo.hideInMenu" size="large">-->
        <!--                <i-switch v-model="menuInfo.hideInMenu" size="large">-->
        <!--                    <span slot="open">显示</span>-->
        <!--                    <span slot="close">隐藏</span>-->
        <!--                </i-switch>-->
        <!--            </formItem>-->
        <!--            <formItem label="面包屑隐藏">-->
        <!--                <i-switch v-model="menuInfo.hideInBread" size="large">-->
        <!--                    <span slot="open">显示</span>-->
        <!--                    <span slot="close">隐藏</span>-->
        <!--                </i-switch>-->
        <!--            </formItem>-->

        <formItem>
          <Button type="primary" @click="toEdit">提交</Button>
          <Button style="margin-left: 8px" @click="backUrl">返回</Button>
        </formItem>
      </Form>
    </Card>
  </div>

</template>

<script>
// import iconlist from '@/assets/MenuIcon/font/iconfont.json'
import '@/assets/MenuIcon/font/iconfont.css'
import iconlist from '@/assets/MenuIcon/font/icon.json'
    export default {
        data() {
            return {
                id: '',
                pid: '',
                iconlist:iconlist,
                fage:false,
                menuInfo: {
                    id: 0,
                    pid: 0,
                    titleTop: '顶级菜单',
                    title: '',
                    is_hide_menu: 0,
                    is_hide_bread: 0,
                    is_del: true,
                    icon: '',
                    type: "1",
                    sort: 0
                },
                ruleValidate: {},
                type:[]
            }
        },
        methods: {
            // 获取菜单列表
            getMenuInfo(id, type) {
                this.$axios('/admin/menu/getMenuInfo', {id: id}).then(result => {
                    if (type == 'id') {
                        this.menuInfo = result;
                        this.menuInfo.is_del = this.menuInfo.is_del == 1 ? false : true;
                        this.menuInfo.type = this.menuInfo.type + '';
                    } else {
                        if (result) {
                            this.menuInfo.pid = result.id;
                            this.menuInfo.titleTop = result.title;
                        }
                    }
                })
            },
            radioChange() {
                if (this.menuInfo.type === 1) {
                    return
                }
                this.menuInfo.is_hide_menu = 1;
                this.menuInfo.is_hide_bread = 1;
                this.menuInfo.icon = 'md-alert';
                this.menuInfo.sort = 9999;
            },
            // 添加，修改菜单
            toEdit() {

                let data = {
                    id: this.menuInfo.id,
                    pid: this.menuInfo.pid,
                    is_hide_menu: this.menuInfo.is_hide_menu,
                    is_hide_bread: this.menuInfo.is_hide_bread,
                    is_del: this.menuInfo.is_del ? 0 : 1,
                    title: this.menuInfo.title,
                    name: this.menuInfo.name,
                    path: '/' + this.menuInfo.name,
                    component: this.menuInfo.component,
                    icon: this.menuInfo.icon,
                    sort: this.menuInfo.sort,
                    type: this.menuInfo.type,
                };
                this.$axios('/admin/menu/saveMenuInfo',data).then(result=>{
                    this.$Message.success('更新成功');
                    //执行返回
                    this.$router.go(-1);
                })
            },
            backUrl() {
                this.$router.go(-1);
            },
            // 选择icon图标
            icon(icon){
              this.fage = false;
              this.menuInfo.icon=icon
            },
            // 开启关闭弹窗
            shows(){
              this.fage = !this.fage;
            },
            iconClick(value){
              this.menuInfo.icon = value;
            },
        },
        created() {
            this.menuInfo.id = this.$route.params.id;
            this.menuInfo.pid = this.$route.params.pid;

            if (this.menuInfo.id && this.menuInfo.id != undefined && this.menuInfo.id != 0) {
                // 有id修改的
                this.getMenuInfo(this.menuInfo.id, 'id');
            }
            if (this.menuInfo.pid && this.menuInfo.pid != "undefined" && this.menuInfo.pid != 0) {
                // 有pid说明要查询pid信息
                this.getMenuInfo(this.menuInfo.pid, 'pid');
            } else {
                this.menuInfo.pid = 0;
                this.menuInfo.titleTop = '顶级菜单';
            }
        },
        mounted(){
          this.$refs.inpnt.$el.onclick=this.shows
        }
    }
</script>

<style lang="less">
#addMenu{
  &>[class="ivu-card ivu-card-bordered"]{
    &>[class="ivu-card-body"]{
      &>form{
        &>[class="ivu-form-item"]:nth-child(7){
          position: relative;
          .Tab{
            box-shadow: 0px 0px 6px 1px #00000060 !important;
            height: 150px !important;
          }
          .Tab_Control{
            background: #fff;
            box-shadow: 0px 0px 6px 1px #00000000;
            width: 100%;
            height: 0px;
            overflow: hidden;
            position: absolute;
            bottom:97%;
            left: 0;
            transition: all .3s;
            &>main{
              height: 150px;
              position: absolute;
              top: 0;
              left: 0;
              width: 100%;
              display: flex;
              flex-wrap: wrap;
              overflow: auto;
              &>i:hover{
                background-color: #f3f3f3;
              }
              &>i{
                width: 43px;
                height: 30px;
                line-height: 30px;
                text-align: center;
                font-size: 17px;
                color: #333;
              }
            }
          }
        }
      }
    }
  }
}
</style>
